<template>
    <div>
      <!-- 面包屑导航条 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/technologyList' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>工艺列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!--用于添加卡片（整体展示）-->
      <el-card class="box-card">
        <!--模糊查询表单-->
        <el-form :model="searchForm" class="demo-form-inline" >
          <el-row :gutter="20">
            <el-form-item>
              <el-col :span="4">
                <!--模糊查询输入框 v-model是绑定的数据-->
                <el-input placeholder="订单编号" v-model="searchForm.code"></el-input>
              </el-col>
              <el-col :span="4">
                <!--模糊查询输入框 v-model是绑定的数据-->
                <el-input placeholder="销售姓名" v-model="searchForm.linkmanName"></el-input>
              </el-col>
              <!--搜索+添加的按钮 type可以修改按钮的颜色-->
              <el-button plain type="info" @click="searchList">搜索</el-button>
            </el-form-item>
          </el-row>
        </el-form>
        <!--列表展示 :data是数据绑定 从后台获取的返回数据进行赋值-->
        <el-table
          :data="technologyList"
          style="width: 100%">
          <!--一列的字段 label(需要修改)是上面的行名称 prop（需要修改）是绑定的后台数据-->
          <el-table-column
            prop="id"
            label=""
            width="90">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column
            prop="code"
            label="订单编号"
            width="200">
          </el-table-column>
          <el-table-column
            prop="linkmanName"
            label="销售人"
            width="150">
          </el-table-column>
          <el-table-column
            prop="createDate"
            label="创建时间"
            width="200">
            <template slot-scope="scope">
              {{scope.row.createDate|createDateFit}}
            </template>
          </el-table-column>
          <el-table-column
            prop="updateDate"
            label="更新时间"
            width="200">
            <template slot-scope="scope">
              {{scope.row.updateDate|createDateFit}}
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            width="150">
            <template slot-scope="scope">
              {{scope.row.state|stateFit}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="180">
            <!--点击按钮 需要绑定@click的时间 例如 @click="add"-->
            <template slot-scope="scope">
              <el-dropdown split-button type="primary"  size="mini" >
                操作
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item >
                    <el-button type="text" @click="TechnologyEd(scope.row.id)" style="color: crimson" v-if="scope.row.state=='1'">
                      已转工艺
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item >
                    <el-button type="text" @click="LookDetailten(scope.row.id,scope.row.code)">
                      查看
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text" @click="LookDetailDindan(scope.row.id)" >
                      订单记录
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <!--分页的组件 需要将total,pagenum,pagesize重新定义并且赋值完成分页-->
          <!--用于分页的插件-->
        </el-table>


      </el-card>
      <el-pagination
        :current-page="pagenum"
        :page-size="pagesize"
        :page-sizes="[5, 10, 20, 40]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>

      <!--用于查看BOM详细的对话框-->
      <el-dialog  title="BOM详细" :visible.sync="dialogFormVisible" width="50%"> <!--用户表单框 -->
        <el-table :data="LookByIdList">
          <el-table-column
            property="code"
            label="图号"
            width="170">
            <template slot-scope="scope">
              <a :href="'http://localhost:8080/orderpic/getPic/'+code+'/'+scope.row.code"target="_blank">{{scope.row.code}}</a>
            </template>
          </el-table-column>
          <el-table-column
            property="name"
            label="零件名称"
            width="170">
          </el-table-column>
          <el-table-column
            property="num"
            label="生产数量"
            width="100">
          </el-table-column>
          <el-table-column label="操作" width="280">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="DoItTen(scope.row.id)" type="primary" >制作</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <!--工艺制作对话框-->
      <el-dialog title="工艺制作" :visible.sync="GongYiDo" width="65%">
        <div>
          <span style="margin-right:24px;">图号:{{lingJianList.code}}</span>
          <span style="margin-right:24px;">零件名称:{{lingJianList.name}}</span>
          <span style="margin-right:24px;">数量:{{lingJianList.num}}</span><br>
        </div>
        <div>
          <el-button size="mini" style="margin-top: 30px" type="primary" @click="addFormItem">添加原材料</el-button>
          <template>
            <el-table
              :data="AddMaterialForm"
              border
              style="width: 100%">
              <el-table-column
                label="原材料"
                width="120px">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.materialId" placeholder="请选择" size="mini" @change="count(scope.$index)">
                    <el-option
                      v-for="item in getMaterialList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                label="规格"
                width="120px">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.spec" placeholder="请选择" size="mini" @change="getMathInChicun(scope.row.spec)" >
                    <el-option
                      label="板"
                      :value="0">
                    </el-option>
                    <el-option
                      label="棒"
                      :value="1">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                label="下料件数"
                width="120px">
                <template slot-scope="scope">
                  <el-input type="text" v-model="AddMaterialForm[scope.$index].num" size="mini" @change="count(scope.$index)"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="下料尺寸（mm）"
                width="120px">
                <template slot-scope="scope">
                  <el-input placeholder="长" type="text" v-model="AddMaterialForm[scope.$index].bfLength" size="mini" v-if="scope.row.spec=='0'" @change="count(scope.$index)"></el-input>
                  <el-input placeholder="宽" type="text" v-model="AddMaterialForm[scope.$index].bfWidth" size="mini" v-if="scope.row.spec=='0'" @change="count(scope.$index)"></el-input>
                  <el-input placeholder="直径" type="text" v-model="AddMaterialForm[scope.$index].bfDiam" size="mini" v-if="scope.row.spec=='1'" @change="count(scope.$index)"></el-input>
                  <el-input placeholder="高" type="text" v-model="AddMaterialForm[scope.$index].bfHight" size="mini" @change="count(scope.$index)"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="产品尺寸（mm）"
                width="120px">
                <template slot-scope="scope">
                  <el-input type="text" v-model="AddMaterialForm[scope.$index].afLength" size="mini" v-if="scope.row.spec=='0'" ></el-input>
                  <el-input type="text" v-model="AddMaterialForm[scope.$index].afWidth" size="mini" v-if="scope.row.spec=='0'"></el-input>
                  <el-input type="text" v-model="AddMaterialForm[scope.$index].afDiam" size="mini" v-if="scope.row.spec=='1'" ></el-input>
                  <el-input type="text" v-model="AddMaterialForm[scope.$index].afHight" size="mini" ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="产品面积（cm²）"
                width="120px">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.afArea" size="mini" ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="产品重量（kg）"
                width="120px">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.afWeight" size="mini" ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="操作">
                <template slot-scope="scope">
                  <el-button type="danger" icon="el-icon-delete" circle @click="DeleteRow(scope.$index)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <!--用于工序选择表单-->
        <div>
          <el-button size="mini" style="margin-top: 30px" type="primary" @click="addRowProcess">添加工序</el-button>
          <template>
            <el-table
              :data="AddProcessForm"
              border
              style="width: 100%">
              <el-table-column
                prop=""
                label="工序名称"
                width="120px">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.processId" placeholder="请选择" size="mini">
                    <el-option
                      v-for="item in getProcessList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                label="准备工时（min）"
                width="120px">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.preWorkHour" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="单件工时（min）"
                width="120px">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.sgWorkHour" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                  <el-button type="danger" icon="el-icon-delete" circle @click="DeleteProcessRow(scope.$index)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <el-button type="info" @click="IsNObaocun()" size="mini">取消</el-button>
        <el-button type="primary" @click="Baocun()" size="mini">保存</el-button>
      </el-dialog>
      <!--用于查询订单的日志对话框-->
      <el-dialog title="订单详情" :visible.sync="LookDinDan">
        <el-table :data="getDingdanList">
          <el-table-column property="userName" label="操作人" width="150"></el-table-column>
          <el-table-column property="orderId" label="订单编号" width="200"></el-table-column>
          <el-table-column property="remarks" label="操作说明"></el-table-column>
        </el-table>
      </el-dialog>
    </div>
</template>

<script>
  import moment from 'moment'
    export default {
        name: "technologyList",
      data(){
          return{
            technologyList:[],
            searchForm:{},
            pagenum:0,
            pagesize:5,
            total:0,
            dialogFormVisible:false,
            LookByIdList:[],
            oid:null,
            GongYiDo:false,
            disable:null,
            lingJianList:{},
            AddMaterialForm:[

            ],
            getMaterialList:[],
            AddProcessForm:[],
            getProcessList:[],
            midu:null,
            price:null,
            getDingdanList:[],
            LookDinDan:false,
            code:''
          }
      },
      methods:{
        IsNObaocun:function(){
          this.GongYiDo = false;
          this.AddProcessForm = []
          this.AddMaterialForm = []
        },
        count:function(index){
          this.$http.post("/material/getMaterialMessage/"+this.AddMaterialForm[index].materialId).then((res)=>{
            debugger;
            //获取到这个原材料的密度和价格数据
            this.midu = res.data.result.density;
            this.price = res.data.result.price;
            //先将数据进行取出暂存
            let spec = this.AddMaterialForm[index].spec;
            let num = this.AddMaterialForm[index].num;
            let bfLength = this.AddMaterialForm[index].bfLength;
            let bfWidth = this.AddMaterialForm[index].bfWidth;
            let bfDiam = this.AddMaterialForm[index].bfDiam;
            let bfHight = this.AddMaterialForm[index].bfHight;
            //当规格为板的数据封装
            if (spec==0){
                this.AddMaterialForm[index].afLength = bfLength;
                this.AddMaterialForm[index].afWidth = bfWidth;
                this.AddMaterialForm[index].afHight = (num*bfHight)/this.lingJianList.num;
                this.AddMaterialForm[index].afArea = ((this.AddMaterialForm[index].afLength*this.AddMaterialForm[index].afWidth*2)+(this.AddMaterialForm[index].afLength*this.AddMaterialForm[index].afHight*2)+(this.AddMaterialForm[index].afWidth*this.AddMaterialForm[index].afHight*2)/num)/10000;
                //求出重量大小
                this.AddMaterialForm[index].afWeight = ((this.AddMaterialForm[index].afLength*this.AddMaterialForm[index].afWidth*this.AddMaterialForm[index].afHight)*this.midu/1000000);
            }
            if (spec==1){
              this.AddMaterialForm[index].afHight = bfHight*num/this.lingJianList.num
              this.AddMaterialForm[index].afDiam = bfDiam
              this.AddMaterialForm[index].afArea = ((this.AddMaterialForm[index].afDiam*3.14)+this.AddMaterialForm[index].afHight*(this.AddMaterialForm[index].afDiam*3.14))/10000
              this.AddMaterialForm[index].afWeight = ((this.AddMaterialForm[index].afDiam/2)*(this.AddMaterialForm[index].afDiam/2)*3.14*this.AddMaterialForm[index].afHight)*this.midu/1000000
            }
            }
          )
        },
        Baocun:function(){
          this.$http.post("/order/addMeAndProcess/"+this.lingJianList.id+"/"+this.oid,{piOrderItemMaterialList:this.AddMaterialForm,piOrderItemProcessList:this.AddProcessForm}).then((res)=>{
            if (res.data.success){
              this.$message({
                message:"保存成功",
                type:"success"
              })
              this.GongYiDo = false
              this.AddProcessForm = []
              this.AddMaterialForm = []
              this.searchList;
            }else{
              this.$message.error("保存失败")
            }
            }
          )
        },
        LookDetailDindan:function(id){
          this.LookDinDan = true
          this.$http.post("/order/getOrderDetail/"+id).then((res)=>{
            this.getDingdanList = res.data.result;
            }
          )
        },
        addFormItem:function(){
          this.AddMaterialForm.push({afLength:null,afWidth:null,afHight:null,afDiam:null,afWeight:null,afArea:null,materialId:null});
        },
        searchList:function () {
          this.$http.post("/order/getTechnologyList/"+this.pagenum+"/"+this.pagesize,this.searchForm).then((res)=>{
            debugger;
              this.technologyList = res.data.result.list;
              this.total = res.data.result.total;
          }
          )
        },
        DeleteRow:function(index){
          this.AddMaterialForm.splice(index,1);
        },
        getMListSelect:function(){
          this.$http.post("/material/getSelectList").then((res)=>{
            this.getMaterialList = res.data.result;
            }
          )
        },
        handleSizeChange: function (val) {
          /*将数据重新赋值，并且向后端发送请求*/
          this.pagesize = val;
          this.searchList();
        },
        handleCurrentChange: function (val) {
          /*将数据重新赋值，并且向后端发送请求*/
          this.pagenum = val;
          this.searchList();
        },
        TechnologyEd:function (id) {
          this.$http.post("/order/UpdateStats/"+id).then((res)=>{
            if (res.data.success){
              this.$message({
                message:"工艺成功!",
                type:"success"
              })
              this.searchList();
            }else{
              this.$message.error("转工艺失败");
            }
            }
          )
        },
        DeleteProcessRow:function(index){
          this.AddProcessForm.splice(index,1);
        },
        IsZhizuo:function(){
          this.$http.post("/order/getTenById/"+this.oid).then((res)=>{
            debugger;
            if (res.data.result==1){
              this.disable = false;
            }else{
              this.disable = true;
            }
            }
          )
        },
        addRowProcess:function(){
          this.AddProcessForm.push({});
        },
        LookDetailten:function (id,code) {
          this.code = code;
          alert(code);
          this.oid = id
          this.dialogFormVisible = true;
          debugger;
          this.IsZhizuo();
          this.$http.post("/order/LookById/"+id).then((res)=>{
            this.LookByIdList = res.data.result;
          })

        },
        DoItTen:function (id) {
          this.dialogFormVisible = false;
          this.GongYiDo = true;
          this.$http.post("/order/getMeAndProcessList/"+id).then((res)=>{
            this.AddMaterialForm = res.data.result.piOrderItemMaterialList;
            this.AddProcessForm = res.data.result.piOrderItemProcessList;
            }
          )
          this.$http.post("/order/getMeList/"+id).then((res)=>{
            debugger;
            this.lingJianList = res.data.result;
            }
          )
        },
        getProcessListSelect:function () {
          this.$http.post("/process/getProcessList").then((res)=>{
            this.getProcessList = res.data.result;
            }
          )
        }
      },
      mounted() {
        this.searchList();
        this.getMListSelect();
        this.getProcessListSelect();
      },
      filters:{
        createDateFit:function (val) {
          return moment(val).format("YYYY-MM-DD hh:mm:ss");
        },
        stateFit:function (val) {
          if (val=="1") {
            return "已提交";
          }
          if (val=="2"){
            return "已工艺";
          }
        }
      }
    }
</script>

<style scoped>

</style>
